<!DOCTYPE HTML>
<html>
  <head>
      <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        canvas {
            border: 1px solid #9C9898;
        }
    </style>
  <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
    
</head>
<body>
    <div id="container" ></div>
	<script defer="defer">
		function createSpline(id,mouseX,mouseY){
			var spline  = {};
			spline[id] = new Kinetic.Spline({
				points:[{x:mouseX,y:mouseY}],
				stroke: 'black',
				strokeWidth: 5,
				lineCap: 'round',				
			});
			return{
				splineObj: spline[id]
			}
		}
		function getMousePos(cassava, evt) {
			var rect = cassava.getBoundingClientRect();
			return {
				x: evt.clientX - rect.left,
				y: evt.clientY - rect.top
			};
		}
		function setPointHere(splinex,salayer,cx,cy){
			splinex.attrs.points.push({x:cx, y:cy});
			splinex.setPoints(splinex.attrs.points);
			salayer.draw();
		}
		
		
		
		
		
		
		
       function load(){
			var stage,layer,line,canvas,context,newSpline = {};
			var mouseCX,mouseCY,mouseCoords;
			var move = false;
			var number = 0;
			stage = new Kinetic.Stage({
				container: 'container',
				height: 900,
				width: 600,
			});
			canvas = stage.getContainer();
			layer = new Kinetic.Layer();
/* 			
			var line = new Kinetic.Spline({
				points: [{x:mouseCX,y:mouseCY}],
				stroke: 'black',
				strokeWidth: 5,
				lineCap: 'round',
			 });
			layer.add(line); */
			stage.add(layer);
			
			window.addEventListener('mousedown',function(){
				mouseCX = mouseCoords.x;
				mouseCY = mouseCoords.y;
				newSpline[splineObj] = createSpline(number,mouseCX,mouseCY);
				console.log(newSpline[splineObj]);
				move = true;
			});
			window.addEventListener('mouseup',function(){
				number++;
				move = false;
				
			});
			window.addEventListener('mousemove',function(e){
				mouseCoords = getMousePos(canvas,e);
				mouseCX = mouseCoords.x;
				mouseCY = mouseCoords.y;
				if(move){
					setPointHere(newSpline[splineObj],layer,mouseCX,mouseCY);
				}
				
			});
	   }
	   load();
    </script>
</body>